<!--
 * @Date: 2024-09-12 09:59:56
 * @Author: Yu Weifeng weifeng.yu@gientech.com
 * @Description: 仪表盘
-->
<template>
  <ChartBase :options="chartOptions" :currentEcharts="echarts" class="lc-chart__instrumentpanel" />
</template>
<script setup>
import { chartProps } from '../base.ts';
import { computed } from 'vue';
import ChartBase from '../base.vue';
/******* echarts *********/
import * as echarts from 'echarts/core';
import { GaugeChart } from 'echarts/charts';
import {
  ToolboxComponent,
  TitleComponent,
  GridComponent,
  TooltipComponent,
  DatasetComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { isEmpty } from 'lodash-es';
echarts.use([
  ToolboxComponent,
  TitleComponent,
  GridComponent,
  TooltipComponent,
  DatasetComponent,
  GaugeChart,
  CanvasRenderer
]);

defineOptions({
  name: 'LcChartInstrumentPanel'
});
const props = defineProps(chartProps);

const processData = (data, mapOptions) => {
  if (!isEmpty(mapOptions)) {
    data.forEach((item) => {
      item['name'] = item[mapOptions?.dimension];
      item['value'] = item[mapOptions?.valueMap];
    });
  }
  return data;
};
const chartOptions = computed(() => {
  const options = props.options;
  const processedData = processData(props.data, props.mapOptions);
  if (Array.isArray(options['series'])) {
    options['series'][0]['data'] = processedData;
  } else {
    options['series']['data'] = processedData;
  }
  return options;
});
</script>
